<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejercicio 2</title>
<style type="text/css">
body {
	margin: 3%;
}
</style>
</head>
<body>

	<h1>Comunidades autónomas</h1>
	ccaa
	<select name="com" id="com" onChange="provinciaAjax(this)">

	</select>
	<br />
	provincias
	<select name="prov" id="prov">

	</select>
	<h3>Escoge una comunidad autónoma</h3>
	Observa el cambio de provincias vía AJAX

</body>

<script type="text/javascript">
	function comunidadAjax() {
		var xmlhttp = new XMLHttpRequest();

		var com = document.getElementById("com");

		xmlhttp.open("GET", "form2.php?comunidad=all", true);
		xmlhttp.send();

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//id.innerHTML = xmlhttp.responseText;
				var comunidades = JSON.parse(xmlhttp.responseText);
				var option;
				for ( var i = 0, l = comunidades.length; i < l; i++) {
					option = document.createElement("option");
					option.value = comunidades[i];
					//console.log(option.value);
					option.innerHTML = comunidades[i];
					com.appendChild(option);
				}

				provinciaAjax();

			}
		}

	}

	function provinciaAjax() {
		var com1 = document.getElementById("com");
		var comunidad = com1.value;

		var xmlhttp = new XMLHttpRequest();

		xmlhttp.open("GET", "form2.php?provincia=" + comunidad, true);
		xmlhttp.send();

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				document.getElementById("prov").innerHTML = xmlhttp.responseText;
			}
		}
	}

	comunidadAjax();
</script>

</html>